<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <style>
        body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #f8f8f8; margin: 0; }
        .order-list { max-width: 700px; margin: 30px auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px #eee; padding: 24px; }
        .order-item { border-bottom: 1px solid #eee; padding: 16px 0; }
        .order-item:last-child { border-bottom: none; }
        .order-title { font-weight: bold; font-size: 16px; }
        .order-info { color: #888; font-size: 13px; margin: 6px 0; }
        .order-status { color: #ff6b00; font-size: 13px; }
        .order-btn { background: #ff6b00; color: #fff; border: none; border-radius: 5px; padding: 6px 18px; cursor: pointer; margin-top: 8px; }
        .order-btn:disabled { background: #ccc; }
    </style>
</head>
<body>
<div class="order-list" id="orderList">
    <h2>我的订单</h2>
    <!-- 订单列表将由JS动态插入 -->
</div>

<!-- 订单详情弹窗 -->
<div id="orderDetailModal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.3); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:#fff; padding:30px 40px; border-radius:10px; min-width:300px; max-width:90vw;">
        <div id="orderDetailContent"></div>
        <button onclick="closeOrderDetail()" style="margin-top:20px; padding:8px 30px; background:#ff6b6b; color:#fff; border:none; border-radius:5px; font-size:1rem;">关闭</button>
    </div>
</div>

<script>
    // 假设你已在登录后将用户ID存储在sessionStorage
    const userId = sessionStorage.getItem('userId') || window.userId || 1; // 这里默认1，实际应从登录信息获取

    // 获取订单列表
    function fetchOrders() {
        fetch(`/api/orders/user/${userId}`)
            .then(res => res.json())
            .then(data => renderOrderList(data))
            .catch(() => {
                document.getElementById('orderList').innerHTML = '<h2>我的订单</h2><div style="color:#999;">加载失败</div>';
            });
    }

    // 渲染订单列表
    function renderOrderList(orders) {
        const container = document.getElementById('orderList');
        if (!orders || orders.length === 0) {
            container.innerHTML = '<h2>我的订单</h2><div style="color:#999;">暂无订单</div>';
            return;
        }
        let html = '<h2>我的订单</h2>';
        orders.forEach(order => {
            html += `
                    <div class="order-item">
                        <div class="order-title">订单号：${order.id}</div>
                        <div class="order-info">下单时间：${order.date ? order.date.replace('T', ' ').substring(0, 19) : ''}</div>
                        <div class="order-info">菜品ID：${order.mid} | 地址ID：${order.aid}</div>
                        <div class="order-status">状态：${order.state == 1 ? '已完成' : order.state == 0 ? '未完成' : order.state}</div>
                        <button class="order-btn" onclick="showOrderDetail(${order.id})">查看详情</button>
                    </div>
                `;
        });
        container.innerHTML = html;
    }

    // 查看订单详情
    function showOrderDetail(orderId) {
        fetch(`/api/orders/${orderId}`)
            .then(res => res.json())
            .then(order => {
                let html = `
                        <h3>订单详情</h3>
                        <div>订单号：${order.id}</div>
                        <div>下单时间：${order.date ? order.date.replace('T', ' ').substring(0, 19) : ''}</div>
                        <div>菜品ID：${order.mid}</div>
                        <div>地址ID：${order.aid}</div>
                        <div>状态：${order.state == 1 ? '已完成' : order.state == 0 ? '未完成' : order.state}</div>
                    `;
                document.getElementById('orderDetailContent').innerHTML = html;
                document.getElementById('orderDetailModal').style.display = 'flex';
            });
    }
    function closeOrderDetail() {
        document.getElementById('orderDetailModal').style.display = 'none';
    }

    // 页面加载时获取订单
    window.onload = fetchOrders;
</script>
</body>
</html>